<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item
        class="swipe-item"
        v-for="(image, index) in goodsinfo.pics"
        :key="index"
      >
        <img class="swipe-img" :src="image.pics_mid" />
      </van-swipe-item>
    </van-swipe>
    <div class="goods_price">￥{{ goodsinfo.goods_price }}</div>

    <div class="goods_name">
      {{ goodsinfo.goods_name }}
    </div>

    <div class="goods_info">
      <div class="goods_info_title">图文详情</div>
      <div class="goods_info_content" v-html="goodsinfo.goods_introduce"></div>
    </div>

    <van-goods-action class="bottom_group">
      <van-stepper
        class="stepper"
        v-model="value"
        :max="goodsinfo.goods_state"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addShopcart"
        :disabled="!this.isLogin"
      />
      <van-goods-action-button
        @click="buygoods"
        type="danger"
        text="立即购买"
        :disabled="!this.isLogin"
      />
    </van-goods-action>
  </div>
</template>
<script>
import { request1 } from "../../network/request";
import { mapState, mapGetters } from "vuex";

export default {
  props: ["id"],
  data() {
    return {
      goodsinfo: {}, // 获取到的商品信息
      value: 1,
      shopcart_orderlist: {
        order_id: null,
        order_price: this.TotalPrice,
        order_create_time: this.formatDate(),
        order_address: {},
        goods_list: [],
      },
    };
  },
  computed: {
    ...mapGetters("address", ["getAddress"]),
    ...mapGetters("order", ["getLength"]),
    ...mapGetters("user", ["isLogin"]),
    ...mapState("shopcart", ["cart"]),
  },
  created() {
    request1({
      url: "/goods/detail?goods_id=" + this.id,
    }).then((res) => {
      this.goodsinfo = {
        goods_name: res.message.goods_name,
        goods_price: res.message.goods_price,
        goods_introduce: res.message.goods_introduce,
        pics: res.message.pics,
        goods_state: res.message.goods_state,
        goods_id: res.message.goods_id,
        goods_small_logo: res.message.goods_small_logo,
      };
    });
  },
  methods: {
    buygoods() {
      let temp = [];
      temp.push(this.goodsinfo);
      this.shopcart_orderlist.order_address = this.getAddress[0];
      // console.log(this.getAddress[0]);
      this.shopcart_orderlist.goods_list = temp;
      this.shopcart_orderlist.order_create_time = this.formatDate();
      this.shopcart_orderlist.order_id = this.getLength + 1;
      this.shopcart_orderlist.order_price =
        this.goodsinfo.goods_price * this.value;
      this.$router.push({
        name: "order_create",
        params: {
          shopcart_orderlist: this.shopcart_orderlist,
        },
      });
    },
    addShopcart() {
      // console.log(this.cart);
      let index = this.cart.findIndex(
        (v) => v.goods_id == this.goodsinfo.goods_id
      );

      if (index == -1) {
        console.log(this.value);
        this.goodsinfo.num = this.value;
        this.goodsinfo.selected = true;
        this.$store.commit("shopcart/addCar", this.goodsinfo);
      } else {
        this.$store.commit("shopcart/addNum", [index, this.value]);
      }
      this.$toast("加入购物车成功");
    },
    formatDate() {
      var date = new Date();
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },
  },
};
</script>
<style lang="scss" scoped>
.swipe-img {
  width: 100%;
  height: 60vw;
}
.van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 0px;
  text-align: center;
  background-color: #39a9ed;
}
.goods_price {
  padding: 15px;
  font-size: 24px;
  font-weight: 600;
  color: #ee0a24;
}
.goods_name {
  padding: 0 15px;
}
.goods_info {
  padding-bottom: 50px;
  .goods_info_title {
    font-size: 24px;
    font-weight: bold;
    padding: 15px;
  }
}
.bottom_group {
  position: fixed;
  bottom: 50px;
}
.stepper {
  text-align: center;
}
</style>
